<template>
	<view class="orderDetails">
		<!-- 物流信息 -->
		<view class="logisticsInfo" v-if="options.type == 2">
			<view class="list flex-r-b-c">
				<view class="list_l flex-r-s-c">
					<image src="../../static/mine/ddwlxx.png" mode="widthFix"></image>
					<view class="list_l_l">
						<view class="state">{{orderDetails.exp_status}}</view>
						<view class="title">可通过“查看物流”进行查看</view>
					</view>
				</view>
				<view class="list_r" @tap.stop="goLogistics(orderDetails.orderid)">查看物流</view>
			</view>
		</view>
		
		<!-- 店铺信息 -->
		<view class="shopInfo">
			<!-- 店铺 -->
			<view class="shopInfo_t flex-r-b-c">
				<image src="../../static/logo.png" mode=""></image>
				<view class="shopInfo_t_f flex-r-b-c">
					
					<view class="shopInfo_t_f_l">
						<view class="name">{{orderDetails.sname}}</view>
						<view class="time flex-r-s-c">
							<image src="../../static/icon/phone.png" mode="widthFix"></image>
							<text>{{orderDetails.mobile}}</text>
						</view>
					</view>
					
					<view class="shopInfo_t_f_f flex-r-s-c">
						<image src="../../static/icon/position1.png" mode="widthFix"></image>
						<text>{{orderDetails.distance}}公里</text>
					</view>
					
				</view>
			</view>
			<!-- 分界线 -->
			<view class="division"></view>
			<!-- 用户 -->
			<view class="userInfo flex-r-b-c" v-if="orderDetails.username != null && orderDetails.phone != null">
				<view class="user flex-r-s-c">
					<view class="text">用户名：</view>
					<view class="name">{{orderDetails.username}}</view>
				</view>
				<view class="user flex-r-s-c">
					<view class="text">电话：</view>
					<view class="tel">{{orderDetails.phone}}</view>
				</view>
			</view>
			<!-- 分界线 -->
			<view class="division" v-if="options.type == 2"></view>
			<view class="addressBox flex-r-s-c" v-if="options.type == 2">
				<view class="text">地址：</view>
				<view class="address">{{orderDetails.address}}</view>
			</view>
		</view>
		<!-- 产品列表 -->
		<view class="productList">
			<!-- 列表 -->
			<view class="list" v-for="(item,index) in orderDetails.orderdata" :key="index">
				<!-- 标题 -->
				<view class="list_t flex-r-b-c">
					<view class="list_t_l">服务详情</view>
					<view class="list_t_f">{{item.otime}}</view>
				</view>
				
				<!-- 产品 -->
				<view class="list_c flex-r-b-c" v-for="(items,index) in item.data" :key="index">
					<image :src="items.image" mode="widthFix"></image>
					<view class="list_c_f">
						<view class="name">{{items.pname}}</view>
						<view class="money_box flex-r-b-c">
							<view class="quantity" v-if="options.type == 2">共{{items.gnum}}件</view>
							<view class="quantity" v-else>共1件</view>
							<view class="price" v-if="options.type == 2">¥<text>{{items.price}}</text></view>
						</view>
					</view>
				</view>
				<!-- 技师 -->
				<view class="list_b flex-r-b-c">
					<view class="list_b_l flex-r-s-c">
						<image src="../../static/mine/js.png" mode="widthFix" v-if="options.type == 1"></image>
						<view class="technician" v-if="options.type == 1" >{{item.tname}}</view>
					</view>
					<view class="btn" v-if="options.type == 2 && orderDetails.refund == 1 && orderDetails.after_sale == 0" @tap.stop="commodityCancel">申请退款</view>
					<view class="btn" v-if="options.type == 2 && orderDetails.refund == 1 && orderDetails.after_sale == 1">已申请退款</view>
					<view class="btn" v-if="options.type == 2 && orderDetails.refund == 1 && orderDetails.after_sale == 2">退款成功</view>
					<view class="btn" v-if="options.type == 2 && orderDetails.refund == 1 && orderDetails.after_sale == 3">退款失败</view>
				</view>
			</view>
			
			
			
		</view>
		
		<!-- 到达时间与金额 -->
		<view class="arriveTime_box" v-if="options.type == 1">
			<view class="list_t flex-r-b-c">
				<view class="list_t_l">到达时间</view>
				<view class="time">{{orderDetails.arrive_time}}</view>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="orderList">
			<view class="list_t">订单信息</view>
			<view class="list_b">
				<view class="list flex-r-b-c">
					<view class="list_l">订单编号：</view>
					<view class="list_f">{{orderDetails.orderid}} <text @tap.stop="paste(orderDetails.orderid)">复制</text></view>
				</view>
				<view class="list flex-r-b-c" v-if="orderDetails.buytime">
					<view class="list_l">下单时间：</view>
					<view class="list_f">{{orderDetails.buytime}}</view>
				</view>
				<view class="list flex-r-b-c" v-if=" orderDetails.ctime && orderDetails.ctime != ''">
					<view class="list_l">取消时间：</view>
					<view class="list_f">{{orderDetails.ctime}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {}, // 页面接收参数
				orderDetails: {} , // 订单详情数据
			};
		},
		onLoad(options) {
			this.options = options
			if(options.type == 2){
				uni.setNavigationBarTitle({
					title: '商品订单详情'
				})
				this.getShopOrderDetails() // 获取商品订单详情
			} else {
				this.getServiceOrderDetails() // 获取服务订单详情
			}
		},
		methods:{
			// 获取订单详情
			getShopOrderDetails(){
				let that = this
				that.$api.shopOrder_details({id: that.options.id}).then(res => {
					console.log(res)
					that.orderDetails = res.data.data
				})
			},
			// 获取服务订单详情
			getServiceOrderDetails(){
				let that = this
				that.$api.serviceOrder_details({id: that.options.id}).then(res => {
					console.log(res)
					that.orderDetails = res.data.data
					res.data.data.arrive_time == 0 ? that.orderDetails.arrive_time = '未确定' : that.orderDetails.arrive_time = that.$u.timeFormat(that.orderDetails.arrive_time, 'yyyy-mm-dd hh:MM:ss')
				})
			},
			
			// 跳转物流
			goLogistics(orderid){
				uni.navigateTo({
					url: '/order/logistics/logistics?id=' + orderid
				})
			},
			// 点击复制
			paste(e){
				uni.setClipboardData({
					data: e,
					success(){
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			// 申请退款
			commodityCancel(){
				let that = this
				that.$api.commodity_cancel({id: that.options.id}).then(res => {
					console.log(res)
					uni.showToast({
						title: '申请退款已提交，请耐心等待',
						icon: 'none'
					})
					that.orderDetails.after_sale = 1
				})
			}
		}
	}
</script>

<style lang="less">
	.orderDetails{
		padding-bottom: 100rpx;
		
		.logisticsInfo{
			width: 100vw;
			height: auto;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			
			.list{
				width: 100%;
				height: 152rpx;
				background-color: #45806E;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 30rpx;
				
				.list_l{
					image{
						width: 120rpx;
						height: 60rpx;
					}
					.list_l_l{
						margin-left: 20rpx;
						.state{
							color: #FFFFFF;
							font-weight: bold;
							font-size: 36rpx;
						}
						.title{
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
							opacity: 0.6;
						}
					}
				}
				
				.list_r{
					width: 164rpx;
					height: 62rpx;
					line-height: 62rpx;
					text-align: center;
					border-radius: 40rpx;
					background-color: #FFFFFF;
					font-size: 26rpx;
					font-weight: 500;
					color: #4B4B4B;
				}
			}
		}
		.shopInfo{
			width: 100vw;
			height: auto;
			background-color: #FFFFFF;
			.shopInfo_t{
				box-sizing: border-box;
				padding: 30rpx;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				.shopInfo_t_f{
					width: 85%;
					.shopInfo_t_f_l{
						.name{
							font-size: 32rpx;
							font-weight: 500;
							color: #4D4D4D;
						}
						.time{
							color: #999999;
							font-size: 24rpx;
							font-size: 500;
							image{
								width: 24rpx;
								height: 24rpx;
								margin-right: 8rpx;
							}
						}
					}
					.shopInfo_t_f_f{
						font-size: 24rpx;
						font-weight: 500;
						color: #0F4C3A;
						image{
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
				//
			}
			
			.division{
				width: 80%;
				height: 2rpx;
				background-color: #F2F2F2;
				margin: 0 auto;
			}
			//
			.userInfo{
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				.user{
					font-size: 28rpx;
					font-weight: 500;
					.text{
						color: #7C7C7C;
					}
					.name{
						color: #292929;
					}
					.tel{
						color: #4B4B4B;
					}
				}
			}
			//
			.addressBox{
				width: 100vw;
				height: 80rpx;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				.text{
					color: #7B7B7B;
				}
				.address{
					color: #292929;
				}
			}
		}
		//
		.productList{
			width: 90vw;
			margin: 40rpx auto;
			.list{
				width: 100%;
				height: auto;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				margin-bottom: 30rpx;
				.list_t{
					height: 80rpx;
					box-sizing: border-box;
					padding: 0rpx 30rpx;
					border-bottom: 1px solid #F2F2F2;
					.list_t_l{
						font-size: 28rpx;
						color: #4B4B4B;
						font-weight: bold;
					}
					.list_t_f{
						font-size: 24rpx;
						color: #9F9F9F;
						font-weight: 400;
					}
				}
				//
				.list_c{
					box-sizing: border-box;
					padding: 30rpx;
					border-bottom: 1px solid #F2F2F2;
					image{
						width: 236rpx;
						height: 194rpx;
						border-radius: 10rpx;
					}
					.list_c_f{
						width: 58%;
						line-height: 90rpx;
						.name{
							font-size: 32rpx;
							font-weight: bold;
							color: #3B3B3B;
						}
						.money_box{
							width: 100%;
							.quantity{
								color: #959595;
								font-size: 28rpx;
								font-weight: 500;
							}
							.price{
								color: #FF6C1D;
								font-size: 34rpx;
								font-weight: 400;
								text{
									font-size: 42rpx;
									font-weight: bold;
									display: inline-block;
								}
							}
						}
					}
				}
				//
				.list_b{
					height: 104rpx;
					box-sizing: border-box;
					padding: 0rpx 30rpx;
					image{
						width: 34rpx;
						height: 34rpx;
						margin-right: 10rpx;
					}
					.btn{
						width: 146rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1px solid #FF6C1D;
						color: #FF6C1D;
						border-radius: 40rpx;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
			}
			//
		}
		//
		.arriveTime_box{
			width: 90vw;
			height: auto;
			margin: 40rpx auto;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			.list_t{
				height: 88rpx;
				font-size: 28rpx;
				font-weight: 500;
				border-bottom: 1px solid #F2F2F2;
				.list_t_l{
					color: #585858;
				}
				.time{
					color: #4B4B4B;
				}
			}
			.list_b{
				height: 88rpx;
				.list_b_l{
					color: #585858;
				}
				.price{
					color: #FF6C1D;
					font-size: 34rpx;
					text{
						font-size: 42rpx;
						font-weight: bold;
						display: inline-block;
					}
				}
			}
		}
		//
		.orderList{
			width: 90vw;
			height: auto;
			margin: 40rpx auto;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			.list_t{
				height: 80rpx;
				line-height: 80rpx;
				box-sizing: border-box;
				padding: 0rpx 30rpx;
				border-bottom: 1px solid #F2F2F2;
				color: #898989;
				font-weight: 500;
				font-size: 24rpx;
			}
			.list_b{
				height: auto;
				box-sizing:  border-box;
				padding: 10rpx 30rpx;
				.list{
					height: 60rpx;
					color: #585858;
					font-weight: 500;
					.list_l{
						font-size: 28rpx;
					}
					.list_f{
						font-size: 24rpx;
						text{
							display: inline-block;
							color: #FF6C1D;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
